
<template>
  <div class='container'>
    <!-- Home 组件 -->
    <header>
      <el-row :gutter="20">
        <el-col :span="18"
                class="pl-30">
          <h2 class="grid-content bg-purple">
            电商后台管理系统</h2>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <span>
              {{admin}}
            </span>
            <el-button type="info"
                       class="ml-30"
                       @click='logout'>退出</el-button>
          </div>
        </el-col>
      </el-row>

    </header>

    <el-row>
      <!-- 左边  -->
      <el-col :span="4">
        <!-- -->
        <el-menu router
                 :default-active="activeIndex"
                 class="el-menu-vertical-demo"
                 @open="handleOpen"
                 @close="handleClose"
                 @select='handlerSelect'
                 background-color="#545c64"
                 text-color="#fff"
                 active-text-color="#e1251b">
          <!-- 
                 authName: "用户管理"
children: [{…}]
id: 125
order: 1
path: "users"
icon:'xxx' -->

          <el-submenu :index="item1.id+''"
                      v-for="item1 in menuList"
                      :key="item1.id">
            <!--  一级菜单 -->
            <template slot="title">
              <i class="el-icon-location"></i>
              <span> {{item1.authName}}</span>
            </template>
            <!--  二级菜单 -->
            <el-menu-item :index="'/' +item2.path"
                          v-for="item2 in item1.children"
                          :key="item2.id">
              <i class="el-icon-share"></i>

              <span>{{item2.authName}}</span>
            </el-menu-item>
          </el-submenu>

        </el-menu>

      </el-col>
      <el-col :span="20">
        <!--  右边 -->

        <div class="box">
          <router-view></router-view>
        </div>

      </el-col>

    </el-row>

  </div>
</template>

<script>

import { leftMenuList } from '../../api/index'

export default {
  name: '',
  data () {
    return {
      menuList: [],
      activeIndex: '104',
      admin: 'xxx'
    }
  },


  async mounted () {

    let { username } = JSON.parse(localStorage.getItem('userName')) || []

    this.admin = username




    let { meta, data } = await leftMenuList()
    console.log(data);
    this.menuList = data

  },


  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    },
    handlerSelect (index) {
      console.log(index);
      this.activeIndex = index
    },
    // 退出功能 
    // 方式一
    // logout () {
    //   // 1  提示是否真的要退出 确定 按钮   如果真的退出     那么  1.1 清除token  1.2  跳转到登录页面  1.3 退出成功提示 
    //   //  2    如果不退出  取消    什么都不做
    //   this.$confirm('是否真的要退出 客官不在等等吗?', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       localStorage.removeItem('userName')
    //       // clearToken()
    //       this.$router.replace('/login')



    //       this.$message({
    //         type: 'success',
    //         message: '退出成功!'
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '取消'
    //       });
    //     });

    // }
    // 方式二 
    async logout () {
      let flag = await this.$confirm('是否真的要退出 客官不在等等吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => {
        alert(err)
      })
      if (flag !== 'confirm') return this.$message.info({ message: '取消' });
      localStorage.removeItem('userName')
      this.$router.replace('/login')
      this.$message.success({ message: '退出成功' });
    }

  },
}
</script>

<style scoped lang='less'>
header {
  height: 60px;
  line-height: 60px;
  background-color: #b3c0d1;
}
.logoutBtn {
  margin: 0 8px;
}

.box {
  margin: 20px;
  // background-color: pink;
}
</style>